/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');

.fungames-image-container{
    position: relative;
    /* min-height: 100vh; */
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px;
}


/* Modified code to display three images per row */
.fungames-image-container .fungames-images {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.fungames-image-container .fungames-images .fungames-image-box {
    position: relative;
    height: 300px;
    width: calc(33.33% - 30px);
    min-width: 350px; /* Added property */
    margin-bottom: 30px;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 10px rgb(0, 0, 0);
}

.fungames-image-container .fungames-images .fungames-image-box img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
    transition: transform 0.2s linear;
    filter: grayscale(0%);
    transition: filter 0.3s ease;
}

.fungames-image-container .fungames-images .fungames-image-box:hover img {
    filter: grayscale(100%); /* Hover grayscale */
    cursor: pointer;
}


/* Title Area */
.fungames-image-container .fungames-images .fungames-image-box h6 {
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    width: 100%;
    height: auto;
    text-shadow: 0 0 2px #00d9ff, 0 0 2px #00d9ff, 0 0 2px #00d9ff;
    box-shadow: 0 0 100px #00ccff, 0 0 2px #00d9ff, 0 0 2px #00d9ff;
    content: "";
    background: linear-gradient(
      280deg,
      transparent 0%,
      #0fbddb 25%,
      transparent 50%,
      #0c4e5a 75%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 15s linear infinite;
    display: inline-block;

}

.fungames-images{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.fungames-images .fungames-image-box{
    margin: auto;
}

/* Media query for screens smaller than 768px */
@media (max-width: 767px) {
    .fungames-image-container .fungames-images .fungames-image-box {
        width: 100%;
        flex-direction: column;
    }
}